<template>
  <el-container style="height: 100%;background-color: #F4F4F5">
    <el-header style="padding: 20px">
      <el-row type="flex">
        <el-col :span="12" type="flex" justify="center">
          <el-date-picker
              v-model="currentTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
          <el-button icon="el-icon-search" circle type="primary" @click="searchHistory"
                     style="margin-left: 13px"></el-button>
          <el-button type="primary" @click="cancelSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main >
      <el-card style="height: 100%;">
        <el-row>
          <el-col :span="8" style="display: flex; flex-direction: column; justify-content: center; height: 100%;">
            <el-empty v-if="dataList.length === 0" description="当前时间段暂时没有数据"></el-empty>
            <div v-else
                 style="display: flex;flex-direction: column; justify-content: center; align-items: center;text-align: center">
              <button style="width: 100%;margin-top: 13px" class="button" v-for="item in dataList"
                      @click="showImage(item.currentName)">
                {{ parseDate(item.currentName) + '预测结果' }}
              </button>
            </div>
          </el-col>
          <el-col :span="16" style="padding:0 13px">
            <el-carousel autoplay arrow="always">
              <el-carousel-item v-for="(image, index) in images" :key="index">
                <el-image :src="image" alt="轮播图" fit="fill">
                  <div slot="error">
                    <el-image :src="require('@/assets/404.png')"
                              style="height: 100%; width: auto; max-width: 100%;"></el-image>
                  </div>
                </el-image>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </el-card>

    </el-main>
    <el-footer style="text-align: center;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.pageNum"
          :page-sizes="[5,10,20,30,40,50,100]"
          :page-size="query.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-footer>
  </el-container>
</template>

<script>
import moment from 'moment'
import {getHistory} from "@/api/java/history";

export default {
  name: "history",
  mounted() {
    this.getData()
  },
  data() {
    return {
      query: {
        startTime: null,
        endTime: null,
        pageSize: 10,
        pageNum: 0
      },
      dataList: [],
      total: null,
      images: [this.$config.historyPath + "/oneHour.png", this.$config.historyPath + "/twoHour.png"],
      currentTime: null,
      filePrefix: this.$config.historyPath,//存放的目录前缀
    }
  },
  methods: {
    cancelSearch() {
      this.currentTime = null
      this.reSetForm()
      this.getData()
    },
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.query.pageNum = val
      this.getData()
    },
    showImage(currentName) {
      this.images = [this.filePrefix + currentName + "/oneHour.png", this.filePrefix + currentName + "/twoHour.png"]
    },
    getData() {
      getHistory(this.query).then(res => {
        this.total = res.data.total
        // this.query.pageNum = res.data.pages
        this.dataList = res.data.records
      })
    },
    searchHistory() {
      if (this.currentTime === null) {
        this.$message.error("请选择时间范围")
      } else {
        const startTime = moment(this.currentTime[0]).format('YYYYMMDDHHmm')
        const endTime = moment(this.currentTime[1]).format('YYYYMMDDHHmm')
        this.query.startTime = startTime
        this.query.endTime = endTime
        this.getData()
      }
    },
    reSetForm() {
      this.query.pageSize = 10
      this.query.pageNum = 1
      this.query.startTime = null
      this.query.endTime = null
      this.images = [this.$config.historyPath + "/oneHour.png", this.$config.historyPath + "/twoHour.png"]
    },
    parseDate(timestamp) {
      const dateTime = moment(timestamp, 'YYYYMMDDHHmm');
// 格式化为可读的时间字符串
      const formattedDateTime = dateTime.format('YYYY-MM-DD HH:mm');
      return formattedDateTime
    }
  }
}
</script>

<style scoped>
.button {
  padding: 1em 2em;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  letter-spacing: 5px;
  text-transform: uppercase;
  cursor: pointer;
  color: #2c9caf;
  transition: all 1000ms;
  font-size: 15px;
  position: relative;
  overflow: hidden;
  outline: 2px solid #2c9caf;
}

button:hover {
  color: #ffffff;
  transform: scale(1.1);
  outline: 2px solid #70bdca;
  box-shadow: 4px 5px 17px -4px #268391;
}

button::before {
  content: "";
  position: absolute;
  left: -50px;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #2c9caf;
  transform: skewX(45deg);
  z-index: -1;
  transition: width 1000ms;
}

button:hover::before {
  width: 250%;
}

/deep/ .el-carousel__container {
  height: 600px
}

.el-carousel__item {
  background-color: #d3dce6;
}
</style>